
<!-- 置于页面下方的标签页 -->
<template>
    <div class="main" style="height:fit">
        <el-tabs :tab-position="tabPosition" style="height: auto" class="demo-tabs">

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        基本情况
                    </div>
                </template>
                <div>
                    <stu-information :StuId=StuId />
                </div>
            </el-tab-pane>

            <!-- 使用图片部分 -->
            <!-- <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        选择课程
                    </div>
                </template>
                <div class="row-container">
                    <div class="row-item" v-for="(item, index) in SelectedCourseImg" :key="index" style="margin:5px">
                        <div style="width: 80%; height: auto" class="item">
                            <el-image style="width: auto; height: 200px;margin-right: 10px;" :src="item.src"
                                :fit="fit" />
                            <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </el-tab-pane> -->

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        选择课程
                    </div>
                </template>
                <div class="row-container">
                    <div class="row-item" v-for="(course, index) in courses" :key="index" style="margin:5px">
                        <div style="width: 80%; height: auto" class="item">
                            <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ course.name }}</p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        推荐课程
                    </div>
                </template>
                <div class="row-container">
                    <div class="row-item" v-for="(course, index) in recommendCourse" :key="index" style="margin:5px">
                        <div style="width: 80%; height: auto" class="item">
                            <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ course.name }}</p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'; // Use import instead of require

const props = defineProps({
    StuId: String
});


//------请求后端部分------
const studentInfo = ref(""); // Initialize as empty string


// 使用ref创建响应式变量
const courses = ref([]);
const recommendCourse = ref([]);
const studentId = props.StuId;

// 在组件加载时调用fetchData函数获取数据
onMounted(() => {
    //记得之后改为get方法
    axios.get(`http://localhost:8080/Aduitor/StuCourse?studentId=${studentId}`)
        .then(response => {
            console.log('StuCourse 请求成功：', response);
            // 请求成功，更新学生信息
            courses.value = response.data.courses;
            recommendCourse.value = response.data.recommendCourse;
            // 处理课程数据，将课程名称和分数提取出来

        })
        .catch((error) => {
            // 请求失败，处理错误
            console.error("请求失败：", error);
        });
});


const SelectedCourseImg = ref([
    { name: '1+X初级认证考试', src: '/src/assets/c1.jpg', alt: 'c1' },
    { name: '1+X中级认证考试', src: '/src/assets/c2.jpg', alt: 'c2' },
    { name: '1+X高级认证考试', src: '/src/assets/c3.jpg', alt: 'c3' },
    { name: '前置知识-基于卷积神经网络的人脸识别', src: '/src/assets/course345.jpg', alt: 'c3' },
])


const tabPosition = ref('left')
</script>


<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 10px;
    /* color: #6b778c; */
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}


.row-item {
    width: 30%;
    /* 设置每个项目占据父容器的30%宽度 */
    box-sizing: border-box;
    border-radius: 10px;
    flex-shrink: 0;
}

.row-container {
    overflow-x: auto;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    /* width: auto; */
    justify-content: flex-start;
    /* 设置内容从左侧开始排列 */
}


@media (max-width: 768px) {
    .row-container .el-image {
        flex: 0 0 calc(50% - 10px);
        /* 小于768px宽度时，每个图片占据1/2，并且减去间距 */
    }
}
</style>
